<template>
    <div v-if="num">
        <header>
            <span class="top1">
                <img src="details1/small.png" alt="" @click="fun()">
            </span>
            <span class="top2">文章详情</span>
        </header>
        <h2>
            {{arr[0].title}}
        </h2>
        <div class="con">
            <img :src="arr[0].img1" alt="">
            <p class="c">
                <span class="font1">{{arr[0].title2}} </span>
                <span class="font2">{{arr[0].title3}} </span>
            </p>
            <span class="font3">{{arr[0].title4}} </span>
        </div>
        <img :src="arr[0].img2" alt="">
        <h3>{{arr[0].title5}} </h3>
        <p>
            {{arr[0].title6}}
        </p>
        <p>
            {{arr[0].title7}}
        </p>
        <p>
           {{arr[0].title8}}
        </p>
        <p class="f1"><strong>{{arr[0].title9}}</strong><br>
        <em>{{arr[0].title10}}</em></p>
        <p class="f2">{{arr[0].title11}}</p>
        <img :src="arr[0].img3" alt="">
        <p>
            {{arr[0].title12}}
        </p>
        <img :src="arr[0].img4" alt="" class="img11">
        <img :src="arr[0].img5" alt="" class="img12">
        <h1>热门评论</h1>
        <p class="list">
            暂无评论，<span>我去发表</span>
        </p>
        <div class="bottom">
            <div class="b1">
                <img src="details1/good.png" alt="">
                <span>63</span>
            </div>
            <div class="b2">
                <img src="details1/comment.png" alt="">
                <span>评论</span>
            </div>
            <div class="b3">
                <img src="details1/share.png" alt="">
                <span>分享</span>
            </div>
        </div>
    </div>
</template>

<script>
import {one} from "@/api/topapi.js"
export default {
    data(){
        return{
            arr:[],
            num:false
        }
    },
    methods:{
        fun(){
            this.$router.go(-1)
        }
    },
    mounted(){
        one().then((ok)=>{
            this.arr=ok.data.content.filter((item)=>{
                if(item.id === this.$route.params.wjt){
                    return item;
                }
            })
            this.num=true
        })
    }
}
</script>

<style scoped lang="scss">
    header{
        width: 100%;
        height: 0.44rem;
        background-color: #fff;
        text-align: center;
        position: fixed;
        top:0;
        .top1{
            display: inline-block;
            width: 0.44rem;
            height: 0.44rem;
            text-align: center;
            line-height: 0.44rem;
            position: absolute;
            left: 0.1rem;
            font-size: 0.2rem;
            img{
                width: 0.24rem;
                height: 0.24rem;
            }
        }
        .top2{
            line-height: 0.44rem;
            color: #444;
        }
    }
    h2{
        margin-top: 0.44rem;
        width: 100%;
        height: 0.54rem;
        font-size: 0.2rem;
        color: #666;
        text-align: center;
        // line-height: 0.54rem;
        border-top: 1px solid #ccc;
    }
    .con{
        width: 90%;
        height: 0.75rem;
        display: flex;
        // margin-left: 0.25rem;
        img{
            width: 0.35rem;
            height: 0.35rem;
            vertical-align: top;
        }
        .c{
            display: inline-block;
            display: flex;
            flex-direction: column;
            .font1{
                font-size: 0.14rem;
                color: #666;
                 margin-top: -0.15rem;
            }
            .font2{
                font-size: 0.14rem;
                color:#ccc;
                margin-top: -0.2rem;
            }
        }
        .font3{
            position: absolute;
            right: 0.3rem;
            display: inline-block;
            width: 0.58rem;
            height: 0.3rem;
            border: 1px solid #ccaa7a;
            color: #ccaa7a;
            text-align: center;
            line-height: 0.3rem;
        }
    }
        img{
            width: 3.27rem;
            height: 3.95rem;
            margin-left: 0.25rem;
        }
        h3{
            font-size: 0.17rem;
            color: #666;
            margin: 0.5rem 0;
            margin-left: 0.2rem;
        }
        p{
            font-size: 0.16rem;
            color: #666;
            line-height: 0.4rem;
            width: 3.27rem;
            margin-left: 0.3rem;
        }
        .f1{
            margin: 0.5rem 0;
            margin-left: 0.3rem;
            em{
            font-style: normal;
        }
    }
     .img11{
           margin: 0.2rem  0;
           margin-left: 0.25rem;
        }
        h1{
            width: 89%;
            height: 0.4rem;
            font-size:0.20rem;
            color: #333;
            font-weight: normal;
            margin-top: 0.2rem;
            margin-left: 0.25rem;
        }
        .list{
            width: 100%;
            height: 0.72rem;
            line-height: 0.72rem;
            text-align: center;
            margin-left: -0.15rem;
             margin-bottom: 0.51rem;
            span{
                color: cadetblue;
            }
        }
        .bottom{
            width: 100%;
            height: 0.51rem;
            background-color: #fff;
            position: fixed;
            bottom:0;
            display: flex;
            justify-content: space-around;
            align-items: center;
            .b1{
                img{
                    width: 0.16rem;
                    height: 0.16rem;
                }
                span{
                    font-size: 0.16rem;
                    color: #666;
                }
            }
            .b2{
                img{
                    width: 0.16rem;
                    height: 0.16rem;
                }
                span{
                    font-size: 0.16rem;
                    color: #666;
                }
            }
            .b3{
                img{
                    width: 0.16rem;
                    height: 0.16rem;
                }
                span{
                    font-size: 0.16rem;
                    color: #666;
                }
            }
        }
    
</style>